<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findData" />
    <div style="margin-top: 15px">
      <el-card shadow="never" :body-style="{ padding: '13px' }">
        <div></div>
        <Table
          :isLoading="isLoading"
          @inputChange="inputChange"
          @currentRow="currentRow7"
          @checkboxChange="change10"
          @selectValChange="selectedList"
          :tableHeader="tableHeader"
          :tableData="packingMaterialsMethodsTableDateLsit"
          :TableHeight="'100'"
        ></Table>
      </el-card>
    </div>

    <el-dialog v-model="drawer3" :direction="'ttb'" size="small" :with-header="false">
      <Find :OriginalFilter="{ static: true }" :searchImg="false" :formList="formList1" @findClicked="findData1" @Launchform="Launchform" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PackagingMaterialCategoryDefinition'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { packingMaterials } from '@/api/PurchasingDepartment/FactoryPurchasing/PackagingMaterialCategoryDefinition'
import LoginWork from '@/utils/LoginWork'
import { ElMessage, ElMessageBox } from 'element-plus'
const formList = ref([
  {
    type: 'button',
    checkboxLabel: '增加'
  },
  {
    type: 'button',
    checkboxLabel: '删除'
  }
])

const isLoading = ref(true)

const packingMaterialsMethodsTableDateLsit = ref<any[]>([])

const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '序号',
    inputValue: 0,
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '包材类别',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '计算来源',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '依指令数量计算',
        optionValue: '依指令数量计算',
        optionLabel: '依指令数量计算'
      },
      {
        optionKey: '依外箱数量计算',
        optionValue: '依外箱数量计算',
        optionLabel: '依外箱数量计算'
      }
    ]
  },
  {
    type: 'checkbox',
    checkboxLabel: '按号码分段计算',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '采购部类别选择',
    checked: false
  },
  {
    type: 'button',
    checkboxLabel: '保存'
  }
])

const drawer3 = ref(false)

const countList = ref({
  caluBase: '',
  purFlag: '',
  seqNo: '',
  sizeFlag: '',
  typeName: ''
})

const Launchform = (row: any) => {
  countList.value.caluBase = row[2].selectValue === '依指令数量计算' ? '1' : '2'
  countList.value.purFlag = row[4].checked === true ? 'Y' : ''
  countList.value.seqNo = row[0].inputValue
  countList.value.sizeFlag = row[3].checked === true ? 'Y' : ''
  countList.value.typeName = row[1].inputValue
}

const findData1 = async (count: string) => {
  if (count === '保存') {
    if (countList.value.typeName === '') {
      JMessage.warning('包材类别不可为空')
    } else {
      const result = await LoginWork.post<any, any>(`/PackagMaterialDefinition/addPackagMaterial`, countList.value)
      if (result.code === 200) {
        packingMaterialsMethods()
        drawer3.value = false
        JMessage.success(result.message)
      } else {
        packingMaterialsMethods()
        JMessage.error(result.message)
      }
    }
  }
}

const findData = (row: string) => {
  if (row === '删除') {
    if (lotNoList.value === undefined) {
      JMessage.warning('请选择需要删除的数据')
    } else {
      handleCloseMateriaLKlcLtvCodeUsage1()
    }
  }
  if (row === '增加') {
    drawer3.value = true
  }
}

const currentRow7 = (row: any) => {
  const { seqNo } = row
  lotNoList.value = seqNo
}

const handleCloseMateriaLKlcLtvCodeUsage1 = (_done?: () => void) => {
  ElMessageBox.confirm('确定要删除该数据吗')
    .then(async () => {
      deleteList()
    })
    .catch(() => {})
}

// 删除
const lotNoList = ref()

const deleteList = async () => {
  const result = await LoginWork.post<any, any>(`/PackagMaterialDefinition/deletePackagMaterial?&seqNo=${Number(lotNoList.value)}`)
  if (result.code === 200) {
    packingMaterialsMethods()
    JMessage.success(result.message)
  } else {
    packingMaterialsMethods()
    JMessage.error(result.message)
  }
}

// 包材查询
const selectedList = (_: any, row: any) => {
  change10(row, _)
}

const inputChange = (_: any, row: any) => {
  change10(row, _)
}

const change10 = async (row: any, list: any) => {
  list.sizeFlag = list.sizeFlag === true ? 'Y' : ''
  list.purFlag = list.purFlag === true ? 'Y' : ''
  list.caluBase = list.caluBase.selectValue === '依指令数量计算' ? '1' : '2'
  delete list.disableConfirm
  delete list.change
  const result = await LoginWork.post<any, any>('/PackagMaterialDefinition/updatePackagMaterial', [list])
  if (result.code === 200) {
    packingMaterialsMethods()
    JMessage.success(result.message)
  } else {
    packingMaterialsMethods()
    JMessage.error(result.message)
  }
}

const packingMaterialsMethods = async () => {
  const result = await packingMaterials()
  packingMaterialsMethodsTableDateLsit.value = result.lotNoList.map((item: any) => {
    item.caluBase = {
      selectValue: item.caluBase === '1' ? '依指令数量计算' : '依外箱数量计算',
      options: [
        { value: '依指令数量计算', label: '依指令数量计算', item: '1' },
        { value: '依外箱数量计算', label: '依外箱数量计算', item: '2' }
      ]
    }

    if (item.sizeFlag === 'Y') {
      item.sizeFlag = true
    }

    if (item.purFlag === 'Y') {
      item.purFlag = true
    }

    item.disableConfirm = true
    item.change = 'Y'

    return item
  })
  formList1.value[0].inputValue = packingMaterialsMethodsTableDateLsit.value.length + 1
  isLoading.value = false
}

onMounted(() => {
  packingMaterialsMethods()
})

const tableHeader = ref([
  {
    label: '序号',
    prop: 'seqNo',
    change: 'true',
    width: '55'
  },
  {
    label: '包材类别',
    prop: 'typeName',
    width: '120'
  },
  {
    type: 'select',
    label: '计算来源',
    prop: 'caluBase',
    width: '120'
  },
  {
    type: 'checkbox',
    label: '按号码分段计算',
    prop: 'sizeFlag',
    width: '120'
  },
  {
    type: 'checkbox',
    label: '采购部类别选择',
    prop: 'purFlag',
    width: '120'
  }
])
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  background-color: white;
}

.btns {
  display: flex;
  padding: 10px 35px 5px;
  justify-content: end;

  .bg {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7;
    color: #000000;
  }
}
</style>
